<template>
  <div>
    <el-form
      v-loading="loading"
      ref="ruleForm"
      :rules="rules"
      label-width="80px"
      :model="form"
      style="width: 440px"
    >
      <el-form-item label="名称" prop="name">
        <el-select
          style="width: 360px"
          clearable
          ref="optionRef"
          v-model="value"
          placeholder="请选择APP"
          @change="onChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value + ',' + item.label + ',' + item.appid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input
          v-model="form.version"
          clearable
          :placeholder="!appInfo.version ? '请输入类似：1.0.1' : '当前最新为: ' + appInfo.version"
        ></el-input>
      </el-form-item>
      <el-form-item label="代码" prop="code">
        <el-input
          v-model="form.code"
          clearable
          :placeholder="!appInfo.code ? '请输入类似：101' : '当前最新为: ' + appInfo.code"
        ></el-input>
      </el-form-item>
      <el-form-item label="更新内容" prop="content">
        <el-input
          clearable
          v-model="form.content"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 10 }"
          placeholder="请输入类似：修复了一些问题"
        ></el-input>
      </el-form-item>
      <el-form-item label="APK文件" required>
        <el-upload
          class="upload-demo"
          drag
          action="#"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :http-request="handleFileUpload"
          :on-change="handlChange"
          ref="upload"
          :auto-upload="false"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadUtil from '@/utils/uploadUtil'
import { getAppVersion, addAppVersion } from '@/api/app.js'
export default {
  data() {
    return {
      loading: false,
      fileList: [],
      file: '',
      value: '',
      appInfo: {},
      form: {
        name: '',
        title: '',
        appid: '',
        version: '',
        code: '',
        type: 'apk',
        platform: 'android',
        content: '修复了一些问题'
      },
      options: [
        {
          label: '米米集市',
          value: 'app.client',
          appid: 'com.mimijishi.app.client'
        },
        {
          label: '米米商家',
          value: 'app.merchantadmin',
          appid: 'com.mimijishi.app.merchantadmin'
        },
        {
          label: '米米店铺',
          value: 'app.shopadmin',
          appid: 'com.mimijishi.app.shopadmin'
        }
      ],
      rules: {
        name: [{ required: true, message: '请选择App', trigger: 'change' }],
        version: [{ required: true, message: '请输入版本号', trigger: 'change' }],
        code: [{ required: true, message: '请输入代码', trigger: 'change' }],
        content: [{ required: true, message: '请输入更新内容', trigger: 'change' }]
      }
    }
  },
  methods: {
    async getAppVersion(value) {
      const result = await getAppVersion({ name: value })
      this.appInfo = result.data.data
    },
    async onChange(value) {
      if (value) {
        this.form.name = value.split(',')[0]
        this.form.title = value.split(',')[1]
        this.form.appid = value.split(',')[2]
        await this.getAppVersion(this.form.name)
      } else {
        this.appInfo = {}

        this.form.name = ''
        this.form.title = ''
        this.form.appid = ''
      }
      this.form.version = ''
      this.form.code = ''
    },
    onSubmit() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          if (this.fileList.length < 1) {
            this.$message('请上传文件')
          } else {
            await this.$refs.upload.submit()
          }
        } else {
          return false
        }
      })
    },
    // 处理移除操作
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    // 处理超出图片个数操作
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    handlChange(file, fileList) {
      this.fileList = fileList
    },
    // 移除之前的操作
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 处理文件上传操作
    async handleFileUpload(file) {
      this.loading = true
      const upload = new UploadUtil()
      upload.fileType = 'apk'
      upload
        .uploadImg(file.file, file.file.name)
        .then(
          async (res) => {
            this.form.url = res.key
            const data = await addAppVersion(this.form)
            if (data.data.data.status) {
              this.$message({ message: '修改成功', type: 'success' })
              this.$refs['ruleForm'].resetFields()
              this.value = ''
              this.fileList = []
            } else {
              this.$message.error('出错了')
            }

            this.$message.success('上传成功')

            this.loading = false
          },
          (err) => (this.loading = false)
        )
        .catch((err) => (this.loading = false))
    }
  }
}
</script>

<style>
</style>